---
target: Umo Editor
keywords: Umo Editor,Tiptap,富文本编辑器,文档编辑器,文档编辑,协同办公,开源编辑器,国产编辑器
description: Umo Editor 是一个基于 Vue3 和 Tiptap 的本土化开源文档编辑器，专为国人用户设计。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式、Markdown 语法、富文本编辑、多种格式的节点插入、页面样式设置、文档导出与打印等功能。此外，Umo Editor 还支持自定义扩展、多语言设置和暗色主题。
---

# 自定义主题

Umo Editor 主要的主题变量使用[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)声明，我们推荐使用替换 CSS 变量的方式来进行个性化的主题配置。

## 暗色主题

从 v2.1.0 版本开始，Umo Editor 支持暗色主题，您可以通过[https://www.umodoc.com/demo?theme=dark](https://www.umodoc.com/demo?theme=dark)，来体验暗色主题。

### 主题配置
见[主题配置](./options/theme)。

### 主题方法
见[主题配置](./methods#settheme)。

### 主题事件
见[主题配置](./events)。

## CSS 变量

以下是所有可用的 CSS 变量，[点击此处](https://github.com/umodoc/editor/tree/main/src/assets/styles/_variables.less)可查看完整的 CSS 变量列表。

```css
/* 默认主题 */
:root {

  /** 主题色 **/
  --umo-primary-color: #3480f9;
  --umo-color-white: #fff;
  --umo-color-black: #000;

  /** 警示颜色 **/
  --umo-warning-color: #f6913e;
  --umo-error-color: #ef3f35;
  
  /** 背景颜色 **/
  --umo-container-background: #f4f5f7;
  --umo-button-hover-background: #f1f3f5;
  /** 文本选中时的背景颜色 **/
  --umo-text-selection-background: #94cfff;

  /** 字体相关 **/
  --umo-font-family: helvetica neue, helvetica, pingfang sc, hiragino sans gb,
    microsoft yahei, simsun, sans-serif;
  --umo-font-size: 14px;
  --umo-font-size-small: 12px;
  --umo-text-color: rgb(51, 54, 57);
  --umo-text-color-light: rgba(0, 0, 0, 0.5);
  --umo-text-color-disabled: #a7abac;

  /** 边框 **/
  --umo-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.03),
    0 8px 10px 1px rgba(0, 0, 0, 4%), 0 5px 5px -3px rgba(0, 0, 0, 8%);
  --umo-border-color: rgba(0, 0, 0, 0.08);
  --umo-border-color-dark: #ddd;
  --umo-border-color-light: rgba(0, 0, 0, 0.05);

  /** 圆角 **/
  --umo-radius: 3px;
  --umo-radius-medium: 5px;

  /** 弹出层 **/
  --umo-popup-content-padding: 12px;
  --umo-popup-max-height: max(60vh, 180px);
  --umo-tooltip-content-padding: 6px 10px;
  --umo-mask-color: transparent;

  /** 编辑器 **/
  --umo-content-placeholder-color: #999;
  --umo-content-text-color: #333;
  --umo-content-node-border: #e7e7e7;
  --umo-content-node-radius: var(--umo-radius);
  --umo-content-node-bottom: 0.75em;
  --umo-content-node-selected-background: #f5f8fc;
  --umo-content-table-border-color: #333;
  --umo-content-table-thead-background: #f1f3f5;
  --umo-content-table-selected-background: rgba(200, 200, 255, 0.4);
  --umo-content-line-number-color: #e7e8ea;
  --umo-content-search-result-background: #fefc7ef2;
  --umo-content-search-result-current-background: #0dff00c3;
  --umo-content-invisible-break-color: rgb(78, 139, 252);
  --umo-content-code-color: var(--umo-primary-color);
  --umo-content-code-background: #f1f3f5;
  --umo-content-code-family: Consolas, Monaco, Andale Mono, Ubuntu Mono,
    monospace;

  /** 滚动条 **/
  --umo-scrollbar-size: 4px;
  --umo-scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
  --umo-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);
}


/* 暗色主题 */
[theme-mode='dark'] {

  /** 主题色 **/
  --umo-color-white: #17171a;
  --umo-color-black: #fff;

  /** 警示颜色 **/
  --umo-warning-color: rgb(207, 110, 45);
  --umo-error-color: rgb(198, 71, 81);

  /** 背景颜色 **/
  --umo-container-background: #2a2b2d;
  --umo-button-hover-background: #2c2c2c;

  /** 字体相关 **/
  --umo-text-color: #ddd;
  --umo-text-color-light: #bbb;
  --umo-text-color-disabled: #999;

  /** 边框 **/
  --umo-border-color: rgba(255, 255, 255, 0.15);
  --umo-border-color-dark: rgba(255, 255, 255, 0.2);
  --umo-border-color-light: rgba(255, 255, 255, 0.08);

  /** 编辑器 **/
  --umo-content-text-color: #000;

  /** 滚动条 **/
  --umo-scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
  --umo-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.45);
}
```

## 示例

```vue
<template>
  <div class="theme-demo">
    <umo-editor />
  </div>
</template>

<script setup>
import { UmoEditor } from '@umoteam/editor'
</script>

<style>
.theme-demo {
  --umo-primary-color: red;
  /* ... */
}
</style>
```

## 在线定制

您可以访问[https://www.umodoc.com/demo?pane=themes](https://www.umodoc.com/demo?pane=themes)，在右侧设置面板中切换到“主题设置”选项卡，修改 CSS 变量 值，即可预览主题效果。
